<template>
  <div>
    <!-- 头部组件 -->
    <home-header></home-header>
    <!-- 首页轮播图 -->
    <home-swiper :swiperList="swiperList"></home-swiper>
    <!-- 首页轮播图 -->
    <home-icons :iconList="iconList"></home-icons>
    <!-- 本周热门榜单 -->
    <home-recommend :hotImages="hotImages" :hotImagesTop="hotImagesTop"></home-recommend>
    <!-- 猜你喜欢 -->
    <home-like :likeImages="likeImages"></home-like>
    <!-- 周末去哪儿 -->
    <home-weekend :weekendList="weekendList"></home-weekend>
    <!-- 底部 -->
    <home-footer></home-footer>
  </div>
</template>
<script>
import HomeHeader from '@/components/homeComponents/Header'
import HomeSwiper from '@/components/homeComponents/Swiper'
import HomeIcons from '@/components/homeComponents/Icons'
import HomeRecommend from '@/components/homeComponents/HotRecommend'
import HomeLike from '@/components/homeComponents/GuessLike'
import HomeWeekend from '@/components/homeComponents/Weekend'
import HomeFooter from '@/components/homeComponents/Footer'
import axios from 'axios'
import { mapState } from 'vuex'
export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeLike,
    HomeWeekend,
    HomeFooter
  },
  data() {
    return {
      // city: '',
      // 本周热门榜单数据
      hotImages: [],
      // 本周热门榜单图片左上角图片
      hotImagesTop: [],
      // 首页分页轮播
      iconList: [],
      // 猜你喜欢组件数据
      likeImages: [],
      // 轮播图数据
      swiperList: [],
      // 周末去哪儿数据
      weekendList: [],
      lastCity: ''
    }
  },
  mounted() {
    // console.log('Home-mounted')
    this.lastCity = this.city
    this.getHomeInfo()
  },
  computed: {
    ...mapState(['city'])
  },
  // 当页面重新显示的时候自动执行
  activated() {
    // console.log('Home-actived')
    // 判断是否重新发送请求
    if (this.lastCity !== this.city) {
      this.lastCity = this.city
      this.getHomeInfo()
    }
  },
  methods: {
    // 首页发请求获取数据
    getHomeInfo() {
      axios.get('/api/index.json?city=' + this.city).then(this.getHomeInfoSucc)
    },
    // 父子组件传参数据源
    getHomeInfoSucc(res) {
      res = res.data
      if (res.ret && res.data) {
        // this.city = res.data.city
        this.swiperList = res.data.swiperList
        this.iconList = res.data.iconList
        this.hotImages = res.data.hotImages
        this.hotImagesTop = res.data.hotImagesTop
        this.likeImages = res.data.likeImages
        this.weekendList = res.data.weekendList
      }
    }
  }
}
</script>
<style>
</style>
